<template>
  <div>
    <h3>我是A组件(接收方)</h3>
    BaseOne
    <p>{{ msg }}</p>
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
  name: 'BaseOne',
  created() {
    // 2.在A组件(接收方),进行监听Bus事件(订阅事件)
    Bus.$on('sendMsg', (msg) => {
      this.msg = msg
    })
  },
  data() {
    return {
      msg: ''
    }
  },
}
</script>

<style scoped>
/* 
  1.默认的style样式,会作用域全局 -> 全局样式
  2.加上scoped属性的style样式,只会作用于当前组件 -> 局部样式

  组件应该有着自己独立的样式,推荐加上scoped
  --------------------------------------------------------
  scoped原理:
    1.给当前组件模板的所有元素,都会被添加上一个自定义属性
      data-v-hash值 -> data-v-5f6a9d56 区分开不同的组件
    2.css选择器后面被自动处理,添加上了属性选择器
      div[data-v-5f6a9d56]
*/
div {
  border: 3px solid blue;
  margin: 30px;
}
</style>